<template>
    <div>
        <h2>当前求和为:{{$store.state.sum}}</h2>
        <select v-model="n">
            <option :value="1">1</option>
            <option :value="2">2</option>
            <option :value="3">3</option>
        </select>
        <button @click="increment">+</button>
        <button @click="decrement">-</button>
        <button @click="incrementIfOdd">当前求和为奇数在+</button>
        <button @click="incrementWaitOdd">等一等在+</button>
    </div>
</template>

<script>
    export default {
        name: 'Count',
        data() {
            return {
                sum:0,
                n:1,
            }
        },
        methods:{
           increment(){
            //    dispatch 传两个参数  一个是给谁加  加什么
               this.$store.dispatch('increment',this.n)   
           },
           decrement(){
               this.$store.dispatch('decrement',this.n) 
           },
           incrementIfOdd(){
               if(this.$store.state.sum % 2){
                  this.$store.dispatch('increment',this.n)
               }
           },
           incrementWaitOdd(){
               setTimeout(()=>{
                    this.$store.dispatch('increment',this.n)
               },500)
           }
        }
    }
</script>

<style>
    *{
        margin-left: 10px;
    }
</style>